<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>购物车</title>
	<!-- Bootstrap core CSS -->
	<link href="static/bootstrap/css/bootstrap.css" rel="stylesheet" />

	<link href="static/css/taobao.css" rel="stylesheet" />
	<script src="static/jquery/jquery.min.js"></script>
	<script src="static/jquery/jquery-migrate-1.2.1.min.js"></script>
	<script src="static/bootstrap/js/bootstrap.js"></script>
	<script src="static/js/taobao.js"></script>
	<script type="text/javascript">

		function numUpdate(flag,id){

			//获取输入框的购买数量    parseInt可以将字符窜转换成 int类型的整数
			var num = parseInt($("#"+id).val());

			if(flag == "min"){
				//购物车中指定的商品信息数量减一

				if(num > 1){
					//发送请求至后台，更新购物车中商品的购买数量
					window.location = "${pageContext.request.contextPath}/updateToCar?id="+id+"&buyNum="+(num - 1);
				}
			}else if(flag == "add"){
				//购物车中指定的商品信息数量加一
				window.location = "${pageContext.request.contextPath}/updateToCar?id="+id+"&buyNum="+(num + 1);

			}
		}


		function changeNum(obj,buyNum){
			//获取用户输入的信息
			var num = parseInt(obj.value);

			if(isNaN(num) || num < 1){
				//还原购买数量
				obj.value = buyNum;
			}else{
				window.location = "${pageContext.request.contextPath}/updateToCar?id="+obj.id+"&buyNum="+num;
			}
		}


		//删除购物车中商品信息
		function  deleteObj(id){
			//如果用户点击确定 会返回 true ,否则返回false
			var flag = window.confirm("是否确定删除该商品记录?");

			if(flag){
				window.location = "${pageContext.request.contextPath}/deleteShopCarById?id="+id;
			}
		}


		//为全选绑定点击事件
		function checkAll(obj){

			//获取所有 的子checkbox
			var boxes = $("[name='box']");

			//操作子checkbox的选中状态
			boxes.prop("checked",obj.checked);

			if(obj.checked){
				//获取所有的小计之和
				var xjs = $("[id^='xiaoJi_']");
				var totalMoney = 0.00;
				$.each(xjs,function(){
					totalMoney += parseFloat($(this).text());
				})
				$("#totalMoney").text(totalMoney.toFixed(2));
				$("#tmoney").val(totalMoney.toFixed(2));
			}else{
				$("#totalMoney").text("0");
			}
		}

		$(function(){

			//为所有的checkbox绑定点击事件
			$("[name='box']").click(function(){

				//获取所有的子checkbox的个数
				var len = $("[name='box']").length;

				//获取选中的checkbox的个数
				var checkedLen = $("[name='box']:checked").length;

				//操作全选的选中状态，如果所有的子checkbox都选中则全选需要选中
				$("#checkAll").prop("checked",len == checkedLen);

				//获取checkbox的id
				var boxId = this.id;

				//根据checkbox的id
				var xjId = boxId.replace("box","xiaoJi");

				//获取小计中的文本值
				var val = $("#"+xjId).text();
				//获取当前结算金额
				var money =  $("#totalMoney").text();

				if(this.checked){
					//当前结算金额 + 选中的商品的小计的值
					$("#totalMoney").text((parseFloat(money) + parseFloat(val)).toFixed(2));
					$("#tmoney").val((parseFloat(money) + parseFloat(val)).toFixed(2));
				}else{
					//当前结算金额 - 选中的商品的小计的值
					$("#totalMoney").text((parseFloat(money) - parseFloat(val)).toFixed(2));
					$("#tmoney").val((parseFloat(money) - parseFloat(val)).toFixed(2));

				}

			})
		})

		//提交表单
		function formSub(){

			//获取选中的checkbox的个数
			var checkedLen = $("[name='box']:checked").length;
			if(checkedLen == 0){
				alert("请选择需要购买的商品信息！");
			}else{
				//获取需要下单的商品id以及购买数量
				var boxes = $("[name='box']:checked");
				var str = "";
				$.each(boxes,function(){
					str = str + this.value+",";
				})
				alert(str.substring(0,str.length - 1));
				$("#aId_buyNum").val(str.substring(0,str.length - 1));
				//提交表单
				$("#forma").submit();
			}
		}
	</script>

</head>
<body>
<!-- 横幅导航条开始 -->
<jsp:include page="/WEB-INF/view/common/nva.jsp"></jsp:include>
<!-- /.navbar -->
<!--  横幅下方的主体开始 -->
<div class="container">
	<div class="row row-offcanvas row-offcanvas-right">

		<!-- 内容主体开始 -->
		<div class="col-xs-12 col-sm-12">
			<div>当前位置：我的购物车</div>
			<div class="table-responsive">
				<table class="table table-hover table-bordered table-striped">
					<thead>
					<tr>
						<th><input type="checkbox" id="checkAll" onclick="checkAll(this)"></th>
						<th style="width: 15%">图片</th>
						<th style="width: 40%">名称</th>
						<th style="width: 20%">价格</th>
						<th style="width: 10%">数量</th>
						<th style="width: 8%">小计</th>
						<th style="width: 7%">操作</th>
					</tr>
					</thead>
					<tbody>
					<c:forEach items="${shopcars}" var="shopcar" varStatus="stat">
						<tr>
							<td style="vertical-align: middle;"><input type="checkbox"
																	   value="${shopcar.article.id}_${shopcar.buyNum}" name="box" id="box_${stat.index}" /> <span id="total_1"
																																								  style="display: none;">${shopcar.article.price}</span></td>
							<td><img style="width:200px;height:200px" alt="商品图片"
									 src="static/image/article/${shopcar.article.image}"></td>
							<td>${shopcar.article.title}</td>
							<td>

								原价:<span class="price">${shopcar.article.price}</span>
								折后价:${shopcar.article.price * shopcar.article.discount}
							</td>
							<td><span class="glyphicon glyphicon-minus" onclick="numUpdate('min','${shopcar.article.id}')" style="cursor: pointer"></span>
								<input id="${shopcar.article.id}" value="${shopcar.buyNum}"
									   style="width: 40px; text-align: center;"
									   onchange="changeNum(this,'${shopcar.buyNum}')" /> <span
										class="glyphicon glyphicon-plus" style="cursor: pointer"
										onclick="numUpdate('add','${shopcar.article.id}')"></span>
							</td>
							<td id="xiaoJi_${stat.index}"><fmt:formatNumber value="${shopcar.article.price * shopcar.buyNum}" pattern="0.00"></fmt:formatNumber></td>
							<td><a href="javascript:deleteObj('${shopcar.article.id}')">删除</a>
								<a>收藏</a></td>
						</tr>

					</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
		<!-- 内容主体结束 -->
	</div>
	<!--/row-->

	<div align="right">
		<form action="saveOrder" method="post" id="forma">
			<input type="hidden" name="totalMoney" id="tmoney"/>
			<input type="hidden" name="aId_buyNum" id="aId_buyNum"/>
			总金额:<span id="totalMoney" style="color: red;">0</span>元&nbsp;&nbsp;&nbsp;&nbsp;
			<button id="commitOrder" class="btn btn-danger" onclick="formSub()" type="button">
				提交订单 <span class="badge">0</span>
			</button>
		</form>

	</div>
	<hr>
	<footer>
		<p>&copy; 版权所有，欢迎借鉴</p>
	</footer>
</div>
<!--/.container-->
<!--  横幅下方的主体结束 -->
</body>
</html>